//by:jiyidel qq:380822670
//p font-size 12
//body font-size 14
//h1 font-size 22
//h2 font-size 18 main 
//h3 font-size 16 sub
$main-color:#00aaee; 
$border-color:#F2F5F8;

.container{width: 1060px;}
.thinkask{
	.navbar-inverse{
		border-radius: 0;
		background-color: #303036;
		.logo{
		    padding: 0px 15px;
			line-height: 50px;
			img{display: inline-block;}
		}
		.form-control{
			height: auto;
			border: 1px solid transparent;
		}
		.navbar-nav{
			padding-left: 15px;
			padding-right: 15px;
			.user{
				&>a{
					padding: 0 10px;
    				line-height: 50px;
					img{
						height: 32px;
						border-radius: 50px;
					}
				}
			}
			
		}
	}
	//note
	.note {
       	margin-bottom: 20px;
        padding: 15px 30px 15px 15px;
        border-left: 5px solid #eee;
        border-radius: 0 4px 4px 0;
        &.note-danger {
            color: #210406;
            background-color: #fef7f8;
            border-color: #f0868e;
        }
         p {
            margin: 0;
                &:last-child {
                margin-bottom: 0;
            }
        }
    }
	//diy box jiyidel QQ:380822670
	.page{
		.page-heading{
		    position: relative;
    		border-bottom: 1px solid #EFEFEF;
    		&.height{height: 41px;}
			h3 {
    			margin-top: 0;
    			margin-bottom: 0;
			    font-size: 18px;
			 	line-height: 41px;
			    font-weight: 500;
			    color: #333;
			    
			}
			h1 {
    			margin-top: 0;
    			margin-bottom: 0;
			    font-size: 22px;
			 	line-height: 1.3;
			    font-weight: 500;
			    color: #333;
			    
			}
			.nav-tabs{
				border-bottom: 1px solid transparent;
			}
		}
	}
	//article list
	.thinkask-article-lists{
		padding-top: 15px;
	  ul{
	  list-style: none;
	  padding-left: 0;
	   	.list{
			border-bottom: 1px solid #dddddd;
		    margin-bottom: 15px;
		    padding-bottom: 15px;
		    .list-img{
			    float: left;
		    	padding-right: 15px;
		    	a{
		    		img{
		    			width: 225px;
		    			height: 139px;
		    		}
		    	}
		    }
		    .block{
		    	width: 100%!important;
		    }
		    .list-content{
	    	 	float: left;
	    	 	position:relative;
	    	 		@media (min-width:768px){
		    			width: 488px;
		    			height: 139px;
		    		}
		    		@media (max-width:768px){
		    			width: 100%;
		    		}
		    	.title{
	    			display: block;
				    word-wrap: normal;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    overflow: hidden;
		    	}
		    	.info{
				    width: 100%;
		    		position: absolute;
				    bottom: 0;
				    margin: 0;
		    	}
		    }
		    &:after {
	        display: block;
	        content: "clear";
	        height: 0;
	        clear: both;
	        overflow: hidden;
	        visibility: hidden;
	      }
	   	}
	  }
	}
	
	.info{
		margin-top: 15px;
		margin-bottom: 10px;
		font-size: 14px;
		color: #999999;
		a{
			color: #999999;
		}
		ul{
			padding-left: 0;
			margin-bottom: 0;
			li{
				float: left;
				padding-right: 10px;
				list-style: none;
			}
		}
	}
	
	
	//default tags or topic
	.tags{
		li{
			padding-right: 5px;
		    float: left;
		    list-style: none;
		}
		a{
			padding: 2px 5px;
			font-size: 12px;
			border-radius: 3px;
			text-decoration: none; 
			color:#999; 
			background-color: #eff1f5;
			&:hover{
				background-color: #00AAEE;
				color: #FFFFFF!important;
			}
		}
		
	}
	
	//crumb
	.breadcrumb {
	    margin: 0;
	    padding: 0 0 15px;
	    background: 0 0;
	    color: #a7b2c0;
	}

	//question
	.thinkask-main{
		ul{
			margin-bottom: 0;
		}
	margin-top: 20px;
		.default-question{
			.question-list{
				padding: 12px 0;
				overflow: visible;
	    		position: relative;
				border-bottom: 1px solid #F2F5F8;
				&:hover{background-color: #F9FAFB;}
				.question-num{
					float: left;
					padding-right: 10px;
					line-height: 1.3;
					display: table-cell;
	    			vertical-align: top;
					color: #999;
					li:first-child {
						color: #00AAEE;
					}
					li{
						float: left;
	    				width: 50px;
						margin-right: 10px;
						text-align: center;
					}
					.num{
						display: block;
						margin-bottom: 8px;
						font-size: 16px;
						line-height: 1.3;
					}
					.txt{
						display: block;
						font-size: 12px;
					}
				}
				.question-content{
					width: 900px;
					display: table-cell;
	    			vertical-align: top;
	    			zoom: 1;
					.question-title{
						margin: 0 0 9px 0;
						line-height: 1.3;
						font-weight: 400;
						font-size: 16px;
					}
					.question-info{
						font-size: 12px;
						color: #999;
						a{
							color: #999;
							&:hover{
								color: $main-color;
							}
						}
					}
				}
			}
		}
	}
	
	
//	article details
	.article-detail{
		.panel-heading{
			border-bottom: 1px dashed #eee;
		}
		.title{
			margin-top: 10px;
			margin-bottom: 10px;
	    	font-size: 30px;
			line-height: 36px;
	    	font-weight: 400;
			word-break: break-all;
	    	word-wrap: break-word;
		}
		.article-detail-content{
	    	padding-top: 15px;
	    	font-size: 14px;
	    	line-height: 1.8;
			word-break: break-all;
	    	word-wrap: break-word;
		}
	}
	
	//question answer
	.thinkask-answer{
		.answer-heading{
				border-bottom: 1px solid $border-color;
				.title{
					font-size: 18px;
				}
		}
		.answer-body{
			.answer-list{
				padding-top: 10px;
				padding-bottom: 10px;
				border-bottom: 1px solid $border-color;
				overflow: visible;
	    		position: relative;
				.answer-user{
					float: left;
	    			padding-right: 10px;
					display: table-cell;
	    			vertical-align: top;
	    			img{
	    				width: 32px;
	    				border-radius: 50px;
	    			}
				}
				.answer-content{
					width: 900px;
					padding-bottom: 10px;
					display: table-cell;
	    			vertical-align: top;
	    			zoom: 1;
					.answer-info{
						margin-bottom: 5px;
						font-size: 12px;
						color: #999;
						a{
							color: #999;
							&:hover{
								color: $main-color;
							}
						}
					}
					.content{
					}
				}
				//sub answer 
				.sub-list{
					margin-left: 40px;
					border-top: 1px solid $border-color!important;
					border-bottom: 0!important;
				}
			}
		}
	}
	
	.thinkask-comments{
		.comment-heading{
				border-bottom: 1px solid $border-color;
				.title{
					font-size: 18px;
				}
		}
		.comments {
			padding-left: 0;
			.comment {
				padding: 10px;
				margin: 0 0 10px 0;
				.comment-img {
					width: 40px;
					float: left;
		
					> img {
						border-radius: 50% !important;
					}
				}
		
				.comment-body {
					position: relative;
					overflow:hidden;
		
					.comment-info {
						&:before{
							content: " ";
	     					display: table; 
						}
						&:after{
							content: " ";
	     					display: table;
	     					clear: both;
						}
						  
						.comment-author {
							display: inline-block;
							float: left;	
							margin: 0px 0px 10px 0;
							color:#060606;
							font-weight: 600;
						}
		
						.comment-date {
							display: inline-block;
							float:right;
							margin: 0px;
							color:#BABABA;
						}
					}
		
					.comment-text {
						color: darken(#BFBFBF, 15%);
					}
		
					.comment-details {
						margin:10px 0px 0px 0;				
						
						.comment-status {
							text-transform: uppercase;
							float: left;
		
							&.comment-status-pending {
								color:#B8C0F5;						
							}
		
							&.comment-status-approved {
								color:#6BD873;
							}
		
							&.comment-status-rejected {
								color:red;
							}
						}
		
						.comment-actions {
							display: none;
							list-style: none;
							margin: 0;
							padding: 0;
							float: right;
		
							> li {
								float: left;
								padding: 0 5px;
								margin: 0;
		
								> a {
									text-transform: uppercase;
									color: #999999;
		
									&:hover {
										color: darken(#999999, 20%);
										text-decoration: none;
									}
								}
							}
						}
					}
				}
		
				&:hover {
					background: #f9f9f9;	
		
					.comment-body {
						.comment-details {
							.comment-actions {
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}
	  //people list
	.people-list{
	  border: 1px solid $border-color;
	  border-radius: 4px;
	  padding: 10px;
	  margin-bottom: 15px;
    .people-avatar{
      float: left;
      img{
        width: 50px;
        border-radius: 50px;
      }
    }
    .people-content{
      h3{
        margin: 0;
        font-size: 16px;
        margin-bottom: 5px;
      }
      p{
        color: #666666;
        font-size: 12px;
      }
      margin-left: 60px;
    }
	}
	//people index
	.people-top{
	  background-color: #F7F7F7;
	  padding-top: 40px;
	  padding-bottom: 40px;
	  margin-top: -20px;
	  .people-top-body{
	    .people-top-avatar {
	      float: left;
  	     img{
          border-radius: 50px;
          width: 80px;
          height: 80px;
        }
	    }
	    .people-top-content{
        float: left;
	      margin-left: 20px;
	      h1{
	        margin-top: 0;
	      }
	    }
	  }
	}
	
	//aside box
	.box{
		margin-bottom: 20px;
		.box-heading{
			border-bottom: 1px solid $border-color;
			h3{
				margin: 0;
				font-size: 18px;
				line-height: 40px;
			}
		}
		.box-body{
			padding-top: 5px;			
			ul{
			 li{
          line-height: 30px;
          position: relative;
          &.li-box-list{
             a{
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
                width: 100%;
            }
            p{
              margin-top: 0;
              font-size: 12px;
              color: #999999;
              line-height: 15px;
            }
          }
        }
				.user-list{
          font-size: 12px;
          color: #999999;
          line-height: 20px;
          .avatar{
            display: table-cell;
            vertical-align: top;
            font-size: 14px;
            line-height: 16px;
            padding-right: 10px;
            img{
              width: 50px;
              display: inline-block;
              border-radius:50px;
            }
          }
          .user-content{
            width: 100%;
            display: table-cell;
            vertical-align: top;
            h4{
              font-size: 14px;
              margin: 0;
            }
           
          }
          
          
        }
			}
		}
	}
	
	

	
}
